<template>
  <view class="container">
    <text class="title">BMI 健康指数</text>

    <view class="gauge">
      <text class="gauge-value">{{ bmiValue.toFixed(1) }}</text>
      <view class="gauge-circle">
        <view
          class="gauge-fill"
          :class="getBmiStatusClass()"
          :style="{ height: fillHeight }"
        ></view>
      </view>
      <view class="fat-range">
        <text class="range-title">正常 BMI 范围</text>
        <text class="range-value">{{ getBmiRange() }}</text>
        <text class="range-status" :class="getBmiStatusClass()">
          {{ getBmiStatus() }}
        </text>
      </view>
    </view>

    <view class="input-group">
      <text>身高 (cm)</text>
      <input
        v-model="height"
        type="number"
        placeholder="输入身高"
        class="input-field"
      />
    </view>

    <view class="input-group">
      <text>体重 (kg)</text>
      <input
        v-model="weight"
        type="number"
        placeholder="输入体重"
        class="input-field"
      />
    </view>

    <view class="input-group">
      <text>年龄</text>
      <input
        v-model="age"
        type="number"
        placeholder="输入年龄"
        class="input-field"
      />
    </view>

    <view class="input-group">
      <text>性别</text>
      <view class="gender-group">
        <button
          @click="setGender('male')"
          :class="{ active: gender === 'male' }"
        >
          男性
        </button>
        <button
          @click="setGender('female')"
          :class="{ active: gender === 'female' }"
        >
          女性
        </button>
      </view>
    </view>

    <view class="button-group">
      <button class="calculate-button" @click="calculateBMI">开始测算</button>
      <button class="reset-button" @click="resetForm">重置</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

const height = ref("");
const weight = ref("");
const gender = ref("male");
const age = ref("");
const bmiValue = ref(0);
const hasCalculated = ref(false);

const fillHeight = computed(() => {
  if (!hasCalculated.value) return "0%";
  return `${getBmiPercentage()}%`;
});

// 重置表单
const resetForm = () => {
  height.value = "";
  weight.value = "";
  age.value = "";
  gender.value = "male";
  bmiValue.value = 0;
  hasCalculated.value = false;
};

// 计算 BMI
const calculateBMI = () => {
  if (!height.value || !weight.value || !age.value) {
    uni.showToast({
      title: "请填写完整信息",
      icon: "none",
      position: "center",
    });
    return;
  }

  bmiValue.value = Number(weight.value) / (Number(height.value) / 100) ** 2;
  hasCalculated.value = true;
  showBmiTips();
};

// 获取 BMI 状态
const getBmiStatus = () => {
  if (!hasCalculated.value) return "";

  const value = bmiValue.value;
  const ageVal = Number(age.value);

  if (ageVal >= 80) {
    if (value <= 26.9) return "体重正常";
    return "体重偏高";
  } else if (ageVal >= 65) {
    if (value <= 26.9) return "体重正常";
    return "体重偏高";
  } else {
    if (value <= 23.9) return "体重正常";
    return "体重偏高";
  }
};

// 获取状态对应的类名
const getBmiStatusClass = () => {
  const status = getBmiStatus();
  if (status === "体重正常") return "status-normal";
  if (status === "体重偏高") return "status-high";
  return "status-low";
};

// 获取百分比显示
const getBmiPercentage = () => {
  const value = bmiValue.value;
  const ageVal = Number(age.value);
  let percentage;

  if (ageVal >= 80) {
    percentage = ((value - 22) / (26.9 - 22)) * 100;
  } else if (ageVal >= 65) {
    percentage = ((value - 20) / (26.9 - 20)) * 100;
  } else {
    percentage = ((value - 18.5) / (23.9 - 18.5)) * 100;
  }

  // 限制百分比在 0-100 之间
  return Math.min(100, Math.max(0, percentage));
};

// 获取正常 BMI 范围
const getBmiRange = () => {
  const ageVal = Number(age.value);
  if (ageVal >= 80) return "22-26.9";
  if (ageVal >= 65) return "20-26.9";
  return "18.5-23.9";
};

// 显示提示信息
const showBmiTips = () => {
  const status = getBmiStatus();
  let message = "";
  let icon = "none";

  switch (status) {
    case "体重正常":
      message = "恭喜！您的体重在健康范围内";
      icon = "success";
      break;
    case "体重偏低":
      message = "体重偏低，建议适当增加营养摄入";
      break;
    case "体重偏高":
      message = "体重偏高，建议加强运动，注意饮食健康";
      break;
  }

  uni.showToast({
    title: message,
    icon: icon,
    duration: 3000,
    position: "center",
  });
};

const setGender = (selectedGender) => {
  gender.value = selectedGender;
};
</script>

<style lang="scss">
.container {
  padding: 20px 16px;
  min-height: 100vh;
  background: linear-gradient(145deg, #1a1a1a, #2c2c2c);
  color: #ffffff;
}

.title {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  margin: 15px 0 25px;
  color: #ffcc00;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);

  &::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent,
      #ffcc00 20%,
      #ffcc00 80%,
      transparent
    );
  }
}

.gauge {
  text-align: center;
  margin: 0 auto 40px;
  width: 200px;
  height: 200px;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  padding: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.gauge-value {
  font-size: 40px;
  font-weight: bold;
  color: #ffcc00;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.gauge-circle {
  width: 160px;
  height: 160px;
  border: 12px solid rgba(255, 204, 0, 0.2);
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
}

.gauge-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 0 100px 100px;

  &.status-normal {
    background: linear-gradient(to top, #4caf50, #81c784);
  }

  &.status-high {
    background: linear-gradient(to top, #f44336, #ff7043);
  }

  &.status-low {
    background: linear-gradient(to top, #ffc107, #ffeb3b);
  }
}

.input-group {
  margin: 0 auto 20px;
  max-width: 280px;
  width: 100%;
  padding: 0;

  text {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    padding: 0 16px;
  }
}

.input-field {
  width: calc(100% - 32px);
  margin: 0 16px;
  padding: 10px 16px;
  margin-bottom: 4px;
  border: 1px solid rgba(255, 204, 0, 0.3);
  border-radius: 16px;
  background-color: rgba(26, 26, 26, 0.6);
  color: #ffffff;
  font-size: 14px;
  transition: all 0.3s ease;

  &:focus {
    border-color: #ffcc00;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.2);
    outline: none;
    transform: scale(1.01);
  }

  &::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
}

.gender-group {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 0 16px;

  button {
    flex: 0 1 auto;
    min-width: 90px;
    padding: 10px 20px;
    font-size: 15px;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, #ffcc00, #ffa726);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: -1;
    }

    &.active {
      color: #1a1a1a;
      border-color: transparent;
      transform: scale(1.05);
      font-weight: 500;

      &::before {
        opacity: 1;
      }
    }

    &:hover:not(.active) {
      border-color: rgba(255, 204, 0, 0.5);
      color: #ffcc00;
    }
  }
}

.fat-range {
  margin-top: 20px;
  text-align: center;

  .range-title {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
  }

  .range-value {
    display: block;
    font-size: 16px;
    color: #ffcc00;
    font-weight: 600;
    margin-bottom: 4px;
  }

  .range-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 14px;
    margin-bottom: 8px;

    &.status-normal {
      background: rgba(76, 175, 80, 0.1);
      color: #4caf50;
    }

    &.status-high {
      background: rgba(244, 67, 54, 0.1);
      color: #f44336;
    }

    &.status-low {
      background: rgba(255, 193, 7, 0.1);
      color: #ffc107;
    }
  }
}

.button-group {
  display: flex;
  gap: 16px;
  margin: 40px auto 0;
  max-width: 280px;
  padding: 0 16px;
}

.calculate-button {
  flex: 2;
  padding: 14px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(45deg, #ffcc00, #ffa726);
  color: #1a1a1a;
  border: none;
  border-radius: 25px;
  box-shadow: 0 4px 15px rgba(255, 204, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ffa726, #ffcc00);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
  }

  &:active {
    transform: translateY(2px);
    box-shadow: 0 2px 8px rgba(255, 204, 0, 0.2);

    &::after {
      opacity: 1;
    }
  }
}

.reset-button {
  flex: 1;
  padding: 14px;
  font-size: 15px;
  font-weight: 500;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(5px);

  &:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
  }

  &:active {
    transform: translateY(2px);
    background: rgba(255, 255, 255, 0.1);
  }
}
</style> 